<template>
    <div id="reg">
      <div id="choose">
        <router-link to="/email" @click.native="changeTitle(1)"  :class="{choose_active : isActive}">邮箱账号注册</router-link>
        <router-link to="/phone" @click.native="changeTitle(2)"  :class="{choose_active : !isActive}">手机号注册</router-link>
      </div>
      <div id="forms">
        <router-view></router-view>
      </div>
    </div>
</template>

<script>
export default {
  name: "Register",
  data(){
    return{
      isActive: true,
    }
  },
  methods:{
    changeTitle(num){
      if (num === 1) {
        this.isActive = true;
      }else {
        this.isActive = false;
      }
    }
  }
}
</script>

<style scoped>
#reg{
  width: 50%;
  margin: auto;
}
#choose{
  margin-bottom: 30px;
  text-align: center;
}
#choose a{
  display: inline-block;
  line-height: 30px;
  font-size: 20px;
}
#choose a:hover {
  color: #409EFF;
}
#choose .choose_active{
  color: #409EFF;
  border-bottom: 3px solid #409EFF;
}
#choose>a:last-child{
  margin-left: 20px;
}

#forms{
  width: 80%;
  margin: auto;
}
</style>